<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>商品详情</title>
	<!-- 引入样式
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    -->
	<!-- 引入组件库
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    -->

	<link rel="stylesheet" href="layui/css/layui.css" />
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="css/index.css" />
	<script src="js/modernizr-custom-v2.7.1.min.js"></script>
	<link rel="stylesheet" href="css/goodsMess.css" />
	<script src="js/checkauth.js"></script>
	<script>
		$(function() {
			var $miaobian = $('.Xcontent08>div');
			var $huantu = $('.Xcontent06>img');
			var $miaobian1 = $('.Xcontent26>div');
			$miaobian.mousemove(function() {
				miaobian(this);
			});
			$miaobian1.click(function() {
				miaobian1(this);
			});

			function miaobian(thisMb) {
				for(var i = 0; i < $miaobian.length; i++) {
					$miaobian[i].style.borderColor = '#dedede';
				}
				thisMb.style.borderColor = '#cd2426';

				$huantu[0].src = thisMb.children[0].src;
			}

			function miaobian1(thisMb1) {
				for(var i = 0; i < $miaobian1.length; i++) {
					$miaobian1[i].style.borderColor = '#dedede';
				}
				//		thisMb.style.borderColor = '#cd2426';
				$miaobian.css('border-color', '#dedede');
				thisMb1.style.borderColor = '#cd2426';
				$huantu[0].src = thisMb1.children[0].src;
			}
			/*
			$(".Xcontent33").click(function() {
				var value = parseInt($('.input').val()) + 1;
				$('.input').val(value);
			})

			$(".Xcontent32").click(function() {
				var num = $(".input").val()
				if(num > 0) {
					$(".input").val(num - 1);
				}

			})*/
			//回到顶部按钮
			$("#my-backtop").click(function() {
				$("html,body").animate({
					scrollTop: 0
				}, 500);
			});

			//鼠标滚动事件，显式回到顶部按钮
		});
	</script>
</head>

<body>

<!-- 引入头部 -->
<div>
	<iframe src="header.html" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<div class="my-index-body" style="background-color: #fff;">
	<!--横向导航栏-->
	<div class="my-daohang1">
		<div class="layui-container">
			<div class="layui-row">
				<!--菜单-->
				<div class="layui-col-md9" style="height: 50px;">
					<a href="">首页</a>
					<a href="">优抢购</a>
					<a href="">聚划算</a>
					<a href="">大转盘</a>
					<a href="">会员折扣</a>
					<a href="">买家秀</a>
				</div>
			</div>
		</div>
	</div>
	<!--横向导航end-->

	<!--促销活动部分-->
	<div class="my-cuxiaodiv">

	</div>
	<!--促销活动部分end-->

	<!-- 商品主题  -->
	<div class="Xcontent" style="height: 480px;margin: 20px auto;">
		<ul class="Xcontent01">

			<div class="Xcontent06"><img src="images/shangpinxiangqing/X1.png"></div>
			<ol class="Xcontent08" >
				<div class="Xcontent07"><img id="currentItemPicure" src="images/shangpinxiangqing/X1.png"></div>
				<div class="Xcontent09"><img src="images/shangpinxiangqing/X7.png"></div>
				<div class="Xcontent10"><img src="images/shangpinxiangqing/X8.png"></div>
				<div class="Xcontent11"><img src="images/shangpinxiangqing/X9.png"></div>
				<div class="Xcontent12"><img src="images/shangpinxiangqing/X10.png"></div>
			</ol>
			<ol class="Xcontent13">
				<div class="Xcontent14">
					<a href="#">
						<p id="currentItemName">新物品</p>
					</a>
				</div>
				<div class="Xcontent15"><img src="images/shangpinxiangqing/X11.png"></div>
				<div class="Xcontent16">
					<p>充电5分钟，温暖2小时</p>
				</div>
				<div class="Xcontent17">
					<p class="Xcontent18">售价</p>
					<p class="Xcontent19">￥<span id="currentItemPrice">69.00</span></p>
					<div class="Xcontent20">
						<p class="Xcontent21">促销</p>
						<img src="images/shangpinxiangqing/X12.png">
						<p class="Xcontent22">领610元新年礼券，满再赠好礼</p>
					</div>
					<div class="Xcontent23">
						<p class="Xcontent24">服务</p>
						<p class="Xcontent25">30天无忧退货&nbsp;&nbsp;&nbsp;&nbsp; 48小时快速退款 &nbsp;&nbsp;&nbsp;&nbsp; 满88元免邮</p>
					</div>

				</div>
				<div class="Xcontent26">
					<p class="Xcontent27">颜色</p>
					<div class="Xcontent28"><img src="images/shangpinxiangqing/X14.png"></div>
					<div class="Xcontent29"><img src="images/shangpinxiangqing/X1.png"></div>
				</div>
				<div class="Xcontent30">
					<p class="Xcontent31">数量</p>
					<div class="Xcontent32" style="cursor: pointer;" id="subNumber"><img src="images/shangpinxiangqing/X15.png"></div>
					<form>
						<input class="input" id="buyNumber" value="1"></form>
					<div class="Xcontent33" style="cursor: pointer;" id="addNumber"><img src="images/shangpinxiangqing/16.png"></div>

				</div>
				<div class="Xcontent34">
					<a href="javascript:void(0);" onclick="buyNow()" class="layui-btn layui-btn-normal">立即购买</a>
				</div>
				<div class="Xcontent35">
					<a href="" class="layui-btn layui-btn-danger" style="color: #fff;">
						加入购物车
					</a>
				</div>
			</ol>
		</ul>
	</div>
	<!-- 商品主题end -->

	<!-- 产品详情 -->
	<div class="layui-container" style="top:20px;">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>产品详情</legend>
		</fieldset>
		<div class="layui-row">
			<div class="layui-col-md3" style="border: 1px solid #E5E5E5;">
				<p>在线客服：</p>
			</div>
			<div class="layui-col-md9" style="padding-left: 50px;font-size: 16px;" >
				产品详情<br />
				<img src="img/xq01.jpg" />
				<img src="img/xq02.jpg" />
				<img src="img/xq03.jpg" />
			</div>
		</div>
	</div>
	<!-- 产品详情end -->

	<!--引入底部-->
	<div class="my-footer">
		<iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
	</div>
	<!--引入底部end-->

	<!--回到顶部按钮-->
	<div id="my-backtop">
		<span class="layui-icon layui-icon-up"></span>
	</div>

</div>

</body>
<script>

	let currentItemId = getQueryVariable("id");
	console.log("当前商品编号是："+currentItemId);

	let currentItem = {};

	//获取url参数
	function getQueryVariable(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
		var context = "";
		if (r != null)
			context = r[2];
		reg = null;
		r = null;
		return context == null || context == "" || context == "undefined" ? "" : context;
	}

	layui.use(['element', 'carousel', 'laypage'], function() {
		var element = layui.element;
		var carousel = layui.carousel;
		var laypage = layui.laypage;

		//执行一个laypage实例
		laypage.render({
			elem: 'test1',
			count: 100,
			theme: '#FF5722'
		});

		//建造实例
		carousel.render({
			elem: '#test1',
			width: '100%' //设置容器宽度
			,
			arrow: 'always' //始终显示箭头
			//,anim: 'updown' //切换动画方式
		});
	});

	$.ajax({
		url: "https://localhost:8443/servletdemo/items/details?id="+currentItemId,
		type: "GET",
		dataType: "text",
		success: function (resp) {
			let result = JSON.parse(resp);
			if(result.code===200) {
				currentItem = result.data;
				$("#currentItemName").text(currentItem.name);
				$("#currentItemPrice").text(currentItem.price);
				$("#currentItemPicure").prop("src",currentItem.pic);
			}
		}
	});



	$("#subNumber").click(function(){
		let num = $("#buyNumber").val();
		if(num>1)
		{
			num--;
			$("#buyNumber").val(num);
		}
		//console.log('减少数量');
	})

	$("#addNumber").click(function(){
		let num = $("#buyNumber").val();
		if(num<100)
		{
			num++;
			$("#buyNumber").val(num);
		}
		//console.log('增加数量');
	})

	function buyNow()
	{
		let buyNumber = $("#buyNumber").val();
		//判断当前用户是否已经登录
		if(!isLogin()){
			window.location.href='login.html';
		}
		//console.log('执行立即购买.....');
		let cart = {
			goodsList:[],
			totalPrice: 0
		}
		currentItem.buyNum = buyNumber;
		cart.goodsList.push(currentItem);
		cart.totalPrice = currentItem.price * buyNumber;

		console.log('---------您的购物车对象是：-------');
		console.log(cart);
		window.localStorage.setItem("cart.servletdemo.com_users"+currentLoginUserId,JSON.stringify(cart));
		setTimeout("javascript:window.location.href='buy.html'",2000);
	}
</script>

</html>